<template>
<div class="mentorBasic">
  <!-- 导航栏 -->
    <div class="studentSituation-header" v-if="!isMentorPage">
      <RouterLink to="/mentor/mentorBasic/proceed" active-class="studentSituation-header-active">进行中</RouterLink>
      <RouterLink to="/mentor/mentorBasic/finish" active-class="studentSituation-header-active">已结束</RouterLink>
    </div>
    <div class="studentSituation-main" v-if="!isMentorPage">
      <RouterView></RouterView>
    </div>
    <div class="studentSituation2-main" v-if="isMentorPage">
      <RouterView></RouterView>
    </div>
</div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const isMentorPage = computed(() => {
  return route.name === 'proceedDetail' || route.name === 'finishDetail'
})
</script>

<style scoped lang="scss">
.mentorBasic {
width: 100%;
height: 100%;
background-color: #f0f2f5;
display: flex;
flex-direction: column;

.studentSituation-header {
  width: 100%;
  height: 10vh;
  display: flex;
  align-items: center;
  padding-left: 60px;
  border-top: 1px solid #c9c9ca;
  border-bottom: 1px solid #c9c9ca;
  background-color: #fff;
  a {
    font-size: 25px;
    height: 100%;
    margin: 20px;
    line-height: 10vh;
  }
  .studentSituation-header-active {
    border-bottom: 5px solid #4c5fbc;
    transition: all 0.2s;
  }
}
.studentSituation-main {
  flex: 1;
  padding: 50px;
}
.studentSituation2-main {
  flex: 1;
}
}

</style>